import {
  Dimensions,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
} from 'react-native';
import React, {useCallback, useEffect} from 'react';
import {observer} from 'mobx-react';
import HomeStore from './HomeStore';
import ResizeImage from '../../components/ResizeImage';
import FlowList from '../../components/flowlist/FlowList.js';
import Heart from '../../components/Heart';
import TitleBar from './components/TitleBar';
import CategoryList from './components/CategoryList';
import {useNavigation} from '@react-navigation/native';
import {StackNavigationProp} from '@react-navigation/stack';

const {width: SCREEN_WIDTH} = Dimensions.get('window');

export default observer(() => {
  const navigation = useNavigation<StackNavigationProp<any>>();
  useEffect(() => {
    HomeStore.requestHomeList();
    HomeStore.getCategoryList();
  }, []);
  const refreshNewData = () => {
    HomeStore.resetPage();
    HomeStore.requestHomeList();
  };
  const loadMoreData = () => {
    HomeStore.requestHomeList();
  };
  const onArticlePress = useCallback(
    (article: ArticleSimple) => {
      navigation.push('ArticleDetail', {id: article.id});
    },
    [navigation],
  );
  const renderItem = ({item, index}: {item: ArticleSimple; index: number}) => {
    return (
      <TouchableOpacity
        style={styles.item}
        onPress={() => onArticlePress(item)}>
        <ResizeImage uri={item.image} />
        <Text style={styles.titleItem}>{item.title}</Text>
        <View style={styles.messageItemContainer}>
          <Image style={styles.avatorItem} source={{uri: item.avatarUrl}} />
          <Text style={styles.userNameItem}>{item.userName}</Text>
          <Heart
            value={item.isFavorite}
            onValueChanged={value => {
              console.log(value);
            }}
            size={20}
          />
          <Text style={styles.favoriteCount}>{item.favoriteCount}</Text>
        </View>
      </TouchableOpacity>
    );
  };
  const Footer = () => {
    return <Text style={styles.footerTxt}>没有更多数据</Text>;
  };
  return (
    <View style={styles.root}>
      <TitleBar
        tab={1}
        ontabChanged={(tabIndex: number) => {
          console.log(`tanIndex=${tabIndex}`);
        }}
      />
      <FlowList
        style={styles.flatList}
        contentContainerStyle={styles.container}
        data={HomeStore.homeList}
        extraData={[HomeStore.refreshing]}
        renderItem={renderItem}
        keyExtractor={(item: ArticleSimple, index: number) => `${item.id}`}
        numColumns={2}
        refreshing={HomeStore.refreshing}
        onRefresh={refreshNewData}
        onEndReachedThreshold={0.1}
        onEndReached={loadMoreData}
        ListFooterComponent={<Footer />}
        ListHeaderComponent={
          <CategoryList
            categoryList={HomeStore.categroyList}
            onCategoryChanged={category => {
              console.log(category);
            }}
          />
        }
      />
    </View>
  );
});

const styles = StyleSheet.create({
  root: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  flatList: {width: '100%', height: '100%'},
  container: {},
  item: {
    width: (SCREEN_WIDTH - 18) >> 1,
    backgroundColor: 'white',
    marginLeft: 6,
    marginBottom: 6,
    borderRadius: 8,
    overflow: 'hidden',
  },
  imageItem: {width: '100%', resizeMode: 'cover', marginBottom: 5},
  titleItem: {
    fontSize: 16,
    marginBottom: 5,
    marginHorizontal: 8,
  },
  messageItemContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10,
    marginHorizontal: 8,
  },
  avatorItem: {
    width: 20,
    height: 20,
    borderRadius: 10,
  },
  userNameItem: {
    flex: 1,
    fontSize: 12,
    color: '#999',
    marginLeft: 6,
  },
  favoriteCount: {
    marginLeft: 4,
    fontSize: 12,
    color: '#999',
  },
  footerTxt: {
    width: '100%',
    fontSize: 12,
    color: '#999',
    marginVertical: 12,
    textAlign: 'center',
    textAlignVertical: 'center',
  },
});
